<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">

  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/collect.css">
  <script src="../bootstrap/js/jquery.min.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/collect.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="../js/element-ui.js"></script>
</head>
<title>浏览记录</title>
<body>
<div id="openVipDiv">
  <!-- 导航 -->
  <nav class="navbar navbar-expand-md bg-white navbar-light fixed-top" style="font-size: 16px;">
    <h1 class="title">
      <a class="navbar-brand" href="#">
        <img src="../img/studyLogo.png" alt="logo" width="40" height="40">
      </a>
    </h1>
    <!-- 折叠按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="navbar-nav mr-auto" id="ulInfo">
        <li class="nav-item"><a class="nav-link" href="../main.html">首页</a></li>
        <!--<li class="nav-item"><a class="nav-link" href="collect.html">收藏</a></li>-->
        <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                            href="videoUpload.html">上传视频</a>
        </li>
        <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                            href="videoManager.html">视频管理</a>
        </li>
        <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="userManager.html">用户管理</a></li>
        <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="functionManager.html">权限管理</a>
        </li>
        <!--下拉-->
        <li class="dropdown" style="margin-right: 450px">
          <a class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false" style="cursor:pointer;">我的 <span class="caret"></span></a>
          <ul class="dropdown-menu" style="text-align: center;">
            <li><a style="color: #6c757d;" href="userInfo.html">个人中心</a></li>
            <li><a style="color: #6c757d;" href="collect.html">我的收藏</a></li>
            <li><a style="color: #6c757d;" href="browse.html">浏览记录</a></li>
            <li><a style="color: #6c757d;" href="../userExit">退出登录</a></li>
          </ul>
        </li>

        <template v-if="currentUser.account == null">
          <li class="nav-item"><a class="nav-link" href="../login.html">你好,请登录</a></li>
          <li class="nav-item"><a class="nav-link" href="#">|</a></li>
          <li class="nav-item"><a class="nav-link" href="../register.html">免费注册</a></li>
        </template>
        <template v-if="currentUser.account != null">
          <li class="nav-item"><a class="nav-link" href="userInfo.html">欢迎你：{{currentUser.account}}</a></li>
          <li class="nav-item"><a class="nav-link" href="#">|</a></li>
          <li class="nav-item"><a class="nav-link" href="../userExit">退出</a></li>
        </template>
      </ul>
      <form id="formSearch" action="" class="form-inline ml-auto">
        <input id="searchInput" type="text" v-model="keyword" class="form-control mr-sm-2" placeholder="Search"
               @change="searchVideo">
        <input @click="searchVideo" type="button" class="btn btn-outline-secondary  my-2 my-sm-0" value="搜索">
      </form>
    </div>
  </nav>

  <!-- 风格展示区 -->
  <div class="trend-style bg-light" id="itemInfo">
    <!--主体开始-->
    <div class="box" id="collectInfo">
      <div class="box_con">
        <!-- 主体内容 -->
        <div class="main comWidth clearfix">
          <!-- 展示区 -->
          <div class="showBar fl">
            <h3 style="text-align: center;margin-top: 30px">欢迎成为VIP用户</h3>
            <div class="clearfix">
              <div class="handleBar fr" style="margin-right:10px;">
                <div class="searchJSBox curSea fl">
                  <i class="icon-search"></i>
                  <!--失焦去查询-->
                  <input type="text" placeholder="请输入关键词">
                </div>
              </div>
            </div>
            <!--清除浮动-->
            <div class="clearfix"></div>
            <el-row>
              <el-col v-if="currentUser.roleId == 3" style="margin-left: 340px;" :sm="12" :lg="6">
                <el-result icon="success" title="恭喜您成为尊贵的VIP用户">
                  <template slot="extra">
                    <el-button type="primary" size="medium" @click="back">继续学习</el-button>
                  </template>
                </el-result>
              </el-col>
              <el-col v-else style="margin-left: 340px;" :sm="12" :lg="6">
                <el-result icon="warning" title="点击按钮开通VIP">
                  <template slot="extra">
                    <el-button type="primary" size="medium" @click="openVip">开通VIP</el-button>
                  </template>
                </el-result>
              </el-col>
            </el-row>
          </div>

          <!-- 侧边栏 -->
          <div class="fr">
            <div class="sideBar">
              <h3 class="relation">热门视频推荐<span class="icon-relation fr"></span></h3>
              <ul class="resoureList">
                <li v-for="item in browseCountList">
                  <a :href="'../showVideoDetail?vid='+item.vid" class="icon-file text_overflow" v-text="item.videoName">视频名称</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- footer部分 -->
<footer class="bg-white navbar-light p-4  text-center">
  <div class="container">
    <h3>合作伙伴</h3>
    <p class="m-1">企业培训 | 合作事宜 | 版权投诉</p>
    <p>冀ICP 备12345678. © 2019-2025 chaoliuchuanda. Powered by liuxin.</p>
  </div>
</footer>
</body>
<script type="text/javascript">
  let message = null;
  /*导航条用户信息*/
  new Vue({
    el: "#openVipDiv",
    data() {
      return {currentUser: "", keyword: "", browseCountList: ''}
    },
    methods: {
      openVip() {
        this.$confirm('请确认支付费用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get("../updateUser?uid=" + this.currentUser.uid + "&roleId=3").then(result => {
            axios.post('../getCurrentUser').then(result => {
              this.currentUser = result.data;
              this.$message({type: 'success', message: '开通成功!'});
            }).catch(function (error) {
              message.error(error.response.data);
              if (error.response.status === 401) window.location.href = "../login.html";
            });
          }).catch(function (error) {
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      back() {
        window.location.href = "../main.html";
      },
      searchVideo: function () {
        window.location.href = "search.html?keyword=" + this.keyword;
      },
      getVideoBrowseByTop: function () {
        const loading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        axios.get("../getVideoByTop?column=browseCount")
          .then(result => {
            loading.close();
            this.browseCountList = result.data;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })
      },
    },
    mounted() {
      message = this.$message;
      axios.post('../getCurrentUser')
        .then(result => {
          this.currentUser = result.data;
        })
        .catch(function (error) {
          message.error(error.response.data);
          if (error.response.status === 401) window.location.href = "../login.html";
        });
      this.getVideoBrowseByTop()
    }
  });

</script>
</html>
